<template>
  <div class="detailpage">
    <!-- 侧边栏开始 -->
    <div class="box">
      <!-- 头部 -->
      <div class="topnav">
        <div class="logo">菜篮子</div>
        <div class="search">
          <div class="search_box">
            <input
              type="text"
              class="inp-search"
              placeholder="菜篮子大促ING..."
              v-model="keyword"
              @change="searchList = []"
              @keyup.enter="search"
            />
            <div
              class="searchtext"
              v-for="(item, index) in searchList"
              :key="index"
            >
              <router-link
                :to="'/detailpage?id=' + item.homeId"
                class="texttitle"
                >{{ item.description }}</router-link
              >
            </div>
            <div class="searchtext" v-if="show">
              <div class="texttitle">找不到您想要的</div>
            </div>
          </div>
          <input type="button" value="Go" class="inp-btn" />
        </div>
        <div>
          <!-- 购物车 -->
          <router-link to="/shoppingcar">
            <div class="car">
              <span class="iconfont icon-gouwuche1"></span>
              购物车
            </div>
          </router-link>
          <!-- 个人中心 -->
          <router-link to="/shoppingcar">
            <div class="car">个人中心</div>
          </router-link>
        </div>
      </div>

      <div class="pro_container" v-if="home">
        <div class="products_box clearfix">
          <!-- 左 -->
          <div class="pro_left">
            <p class="gratia"></p>
            <div class="pro_banner">
              <el-carousel :interval="5000" arrow="always">
                <el-carousel-item
                  v-for="(item, index) in lightMain"
                  :key="index"
                >
                  <router-link
                    tag="div"
                    class="bestimg"
                    :to="'/detailpage?id=' + item.homeId"
                  >
                    <img :src="item.bigImg" alt="" />
                  </router-link>
                  <p class="title">{{ item.description }}</p>
                  <p class="bestprice"><del>99</del>￥{{ item.BigImgprice }}</p>
                </el-carousel-item>
              </el-carousel>
            </div>
            <p class="dsgadv">
              <a
                title="下载手机客户端"
                href="/Home/Article/index/page/zssh.html"
                target="_blank"
                ><img src="../assets/img/adv.jpg"
              /></a>
            </p>
          </div>
          <!-- 中 -->
          <div class="pro_center">
            <div
              class="detinfo"
              style="background-color: #fff; font-size: 14px"
            >
              <router-link tag="p" to="/home">首页</router-link>
              >
              <p>{{ home.homeTitle }}</p>
            </div>
            <div class="detinfo_title">
              <h3>{{ home.description }}</h3>
              <p class="number">货号：{{ home.ItemNumber }}</p>
            </div>
            <div class="detinfo_box">
              <ul class="detinfo_ul">
                <!-- 小图 -->
                <li
                  :class="{ sel: curr == index }"
                  v-for="(data, index) in home.detailImg"
                  :key="index"
                  @click="getIndex(data, index)"
                >
                  <img :src="data" alt="" />
                </li>
              </ul>
              <!-- 大图 -->
              <div class="detinfo_img" style="width: 582px">
                <img :src="home.bigImg" alt="" />
                <!-- 仅当商品没有图片时才显示这张图片 -->
              </div>

              <div class="introduce">
                <div class="detinfo_talk">
                  商品简述：<br />
                  <span>{{ home.jieShao }}</span>
                </div>
                <div class="detinfo_if">
                  <ul class="detinfo_if_list">
                    <li><span>名称：</span>{{ home.description }}</li>
                    <li><span>规格：</span> {{ home.weight }}</li>
                    <li>
                      运费：
                      <span class="freight">包邮</span>
                    </li>
                    <li style="height: auto">
                      <span>保质期：</span> {{ home.ShelfLife }}天
                    </li>
                    <li><span>货号：</span>{{ home.ItemNumber }}</li>
                    <li style="height: auto">
                      <span>配送方式：</span>顺丰快递
                    </li>
                    <li style="height: auto">
                      <span>（当天中午下单隔天下午前到货）</span>
                    </li>
                    <li>
                      <p class="li_p">新老包装交替发货，以收到实物为准</p>
                    </li>
                  </ul>
                  <div class="detinfo_py">
                    <ul class="detinfo_if_list">
                      <li>
                        <span>价格：</span>
                        ￥<big>{{ home.BigImgprice }}</big>
                      </li>
                      <li><span>可获积分：</span>{{ home.BigImgprice }}</li>
                    </ul>
                  </div>
                </div>

                <!-- <div class="detinfo_buy">直接购买</div> -->
                <div class="shoping_box">
                  <el-button
                    class="Shopcar"
                    :plain="true"
                    @click="Shopcar"
                  ></el-button>
                  <el-button
                    class="collection"
                    :plain="true"
                    @click="collection"
                    >收藏</el-button
                  >
                </div>
                <div class="detinfo_msg">
                  <div class="msg_text">
                    服务承诺：到货验收安全检测原产地保障退换货保障
                  </div>
                  <p>温馨提示：此商品不支持24小时无理由退货</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 评价 -->
        <div class="det_cont">
          <div class="det_cont_tab">
            <div class="dct_pj sel">
              <span>评价记录</span>
              <input
                class="appraise"
                v-model="comm"
                @keyup.enter="submitApp"
                type="text"
                placeholder="分享你的评论"
              />
            </div>
          </div>
          <div class="appraise_list" v-for="item in appraise" :key="item.id">
            <div class="avatar_box">
              <div class="avatar">
                <img :src="item.fromImg" alt="" />
              </div>
              <div class="name">
                {{ item.name }}
                <p>{{ item.time }}</p>
              </div>
            </div>

            <div class="appraise_main">
              <!-- <p class="reply">
                <input
                  type="text"
                  @keyup.enter="submit(item.id)"
                  placeholder="回复评论"
                />
              </p> -->
              <p class="main">{{ item.comment }}</p>
              <!-- <div
                class="reply_box"
                v-for="(reply, index) in pinglun"
                :key="index"
              >
                <div class="reply_main">
                  <span class="myself">{{ reply.name }}: </span>
                  {{ reply.comment }}
                  <span class="time">{{ reply.time }} </span>
                  <div class="line"></div>
                </div>
              </div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
    <footerpage></footerpage>
  </div>
</template>

<script>
import { getHomeMian } from "../api/home.js";
import { getAppraisen } from "../api/appraise.js";
import { getLoginCellphone } from "../api/login.js";
import footerpage from "../components/FooterPage.vue";

export default {
  data() {
    return {
      home: null,
      bestNum: [],
      curr: 0,

      // 收藏
      colle: false,
      shoucangLists: [],

      // 购物车
      ShopcarLists: [],
      keyword: "",
      searchList: [],
      show: false, // 显示隐藏
      lightMain: [], //光明食品
      bestMain: [], //热销排行
      // 评论
      appraise: null,
      comm: "",

      // user: JSON.parse(localStorage.getItem("token")),
    };
  },
  watch: {
    $route() {
      if (this.$route.query.id) {
        console.info("加载页面数据");
        this.getHomeMianFun();
      }
    },
  },
  methods: {
    getIndex(detailImg, index) {
      this.home.bigImg = detailImg;
      this.curr = index;
      console.log(this.curr);
    },

    // 评论
    getAppraisenFun() {
      getAppraisen().then((data) => {
        console.log(data.comments);
        this.appraise = data.comments;
      });
    },
    getLoginFun() {
      getLoginCellphone().then((data) => {
        // console.log(data.login);
        this.myslef = data.login;
      });
    },
    // 发布评论
    submitApp() {
      // 计算年月日
      var _this = this;
      let yy = new Date().getFullYear();
      var mm =
        new Date().getMonth() > 9
          ? new Date().getMonth() + 1
          : new Date().getMonth() == 9
          ? new Date().getMonth() + 1
          : "0" + (new Date().getMonth() + 1);
      var dd =
        new Date().getDate() < 10
          ? "0" + new Date().getDate()
          : new Date().getDate();
      _this.gettime = yy + "年" + mm + "月" + dd + "日";
      // 添加评论

      if (!this.comm.length) {
        return;
      } else {
        const id = this.appraise.length + 1;
        this.appraise.unshift({
          id: id,
          comment: this.comm,
          name: "波吉",
          time: _this.gettime,
          fromImg: "../assets/img/toux.jpg",
        });
        localStorage.setItem("plun", JSON.stringify(this.appraise));
      }
      this.comm = "";
    },
    search() {
      getHomeMian().then((data) => {
        // console.log(data.homeMain);
        this.searchList = [];
        data.homeMain.forEach((item) => {
          if (item.description.indexOf(this.keyword) != -1) {
            this.searchList.push(item);
            // console.log(item.description);
            console.log(this.searchList);
          }
        });
        if (this.searchList.length == 0) {
          this.show = true;
        } else {
          this.show = false;
        }
      });
      // console.log(this.searchList);
    },
    getHomeMianFun() {
      getHomeMian().then((data) => {
        // this.homeMain = data.homeMain;
        let index = data.homeMain.findIndex(
          (item) => item.homeId == this.$route.query.id
        );
        this.home = data.homeMain[index];

        //光明食品
        for (var j = 7; j < data.homeMain.length; j++) {
          if (j < 12) {
            this.lightMain.push(data.homeMain[j]);
          }
        }

        // console.log(this.home);
        // 购物车
        let collNum = 0;
        this.ShopcarLists.forEach((item) => {
          if (item.homeId == this.home.homeId) {
            collNum++;
          } else {
            return collNum;
          }
        });
        if (collNum != 0) {
          this.colle = true;
        }

        // 收藏
        // let collNum = 0;
        this.shoucangLists.forEach((item) => {
          if (item.homeId == this.home.homeId) {
            collNum++;
          } else {
            return collNum;
          }
        });
        if (collNum != 0) {
          this.colle = true;
        }

        // 小图
        this.bigImg  = data.homeMain[index].detailImg;
      });
    },
    // 加入购物车
    Shopcar() {
      this.colle = true;
      // 提示收藏成功
      this.$message({
        message: "已加入购物车",
        type: "success",
      });

      let collNum = 0;
      this.ShopcarLists.forEach((item) => {
        if (item.homeId == this.home.homeId) {
          collNum++;
        } else {
          return collNum;
        }
      });
      if (collNum == 0) {
        this.ShopcarLists.push(this.home);
        window.localStorage.setItem(
          "Shopcar",
          JSON.stringify(this.ShopcarLists)
        );
      }
    },
    // 收藏
    collection() {
      if (this.colle) {
        this.colle = false;
        // 取消收藏
        this.$message("已取消收藏");
        console.log(this.$route.query.id);

        let a = this.shoucangLists.findIndex(
          (item) => item.homeId == this.$route.query.id
        );
        this.shoucangLists.splice(a, 1);
        localStorage.setItem("shoucang", JSON.stringify(this.shoucangLists));
      } else {
        this.colle = true;
        // 提示收藏成功
        this.$message({
          message: "收藏成功",
          type: "success",
        });

        let collNum = 0;
        this.shoucangLists.forEach((item) => {
          if (item.homeId == this.home.homeId) {
            collNum++;
          } else {
            return collNum;
          }
        });
        if (collNum == 0) {
          this.shoucangLists.push(this.home);
          window.localStorage.setItem(
            "shoucang",
            JSON.stringify(this.shoucangLists)
          );
        }
      }
    },
  },
  beforeRouteUpdate(to, from, next) {
    console.info("==当前路由id==" + this.$route.query.id);
    if ("id" in this.$route.query) {
      console.info("加载页面数据");
      this.getHomeMianFun();
    }
    next();
  },
  created() {
    if ("id" in this.$route.query) {
      this.getHomeMianFun();
    }

    // console.log(this.$route.query);
    // 收藏
    if (localStorage.shoucang) {
      this.shoucangLists = JSON.parse(localStorage.getItem("shoucang"));
    }

    // 加入购物车
    if (localStorage.Shopcar) {
      this.ShopcarLists = JSON.parse(localStorage.getItem("Shopcar"));
    }

    // 评论
    if (localStorage.plun) {
      this.appraise = JSON.parse(localStorage.getItem("plun"));
    }
    this.getAppraisenFun();
    this.getLoginFun();
  },

  components: {
    // topnav,
    footerpage,
  },
};
</script>
<style lang="scss" scoped>
.detailpage {
  .topnav {
    height: 125px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 0 20px;
    background-color: #ad0002;
    .car {
      color: #fff;
      font-size: 17px;
      padding-right: 10px;
      float: left; // padding-right: 70px;
      .icon-gouwuche1 {
        font-size: 20px;
        position: relative;
      }
      .car_num {
        position: absolute;
        top: -4px;
        right: -1px;
        width: 16px;
        border-radius: 50%;
        height: 16px;
        line-height: 17px;
        text-align: center;
        background: rgb(44, 199, 26);
        color: #fff;
        font-size: 12px;
        transform: scale(0.8);
      }
    }
    .logo {
      //  width: 210px;
      /* height: 70px; */
      font-family: "font";
      font-weight: 700;
      font-size: 75px;
      color: #fff;
      transform: rotateZ(355deg);
      position: relative;
      margin-right: 100px;
      img {
        position: absolute;
        top: 48px;
        right: 4px;
        width: 20px;
        height: 20px;
        border-radius: 7px;
      }
    }

    .search {
      /* max-width: 1125px;
    min-width: 300px; */
      width: 505px;
      height: 33px;
      display: flex;
      border: 1px solid #e09a98;
    }
    .search .search_box {
      width: 94%;
      height: 100%;
      .inp-search {
        outline: none;
        width: 100%;
        height: 100%;
        border: none;
        padding-left: 10px;
        font-size: 15px;
        color: #9b9b9b;
      }
      .searchtext {
        width: 100%;
        height: 100%;
        background-color: #fff;
        line-height: 33px;
      }
    }
    .search .inp-search {
      outline: none;
      width: 94%;
      height: 100%;
      border: none;
      padding-left: 10px;
      font-size: 15px;
      color: #9b9b9b;
    }

    .search .inp-btn {
      border: none;
      width: 7%;
      height: 100%;
      background-color: #b8a17b;
      cursor: pointer;
    }
  }
  .pro_container {
    width: 1340px;
    height: 100%;
    margin: 0 auto;
    // 评价
    .det_cont {
      padding: 0 20px 10px 20px;
      width: 982px;
      margin: 30px 0 50px 260px;
      border: 1px solid #ddd;
      background-color: #fff;
      .det_cont_tab {
        margin-top: 60px;
        // height: 39px;
        background-color: #fff;
        border-bottom: #7f0019 solid 1px;
        .dct_pj {
          line-height: 39px;
          // float: left;
          display: flex;
          justify-content: space-between;
          span {
            display: block;
            cursor: pointer;
            text-align: center;
            color: #515151;
            font-size: 16px;
            line-height: 39px;
            font-weight: bold;
            width: 110px;
            background-color: #7f0019;
            color: #fff;
          }
          .appraise {
            line-height: 39px;
            outline: none;
            width: 270px;
            text-indent: 10px;
            font-size: 17px;
            border-radius: 10px;
            border: 1px solid #000;
            border-bottom: 0;
          }
        }
      }
      .appraise_list {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 21px 20px 0;
        border-bottom: 1px solid #ddd;
        .avatar_box {
          display: flex;
          // padding: 23px 0;
          .avatar {
            width: 58px;
            height: 58px;
            border: 1px solid #ddd;
            border-radius: 50%;
            img {
              width: 100%;
              border-radius: 50%;
              height: 100%;
            }
          }
          .name {
            margin-top: 6px;
            margin-left: 15px;
            font-size: 15px;
            font-weight: bold;
            color: #000;
            p {
              font-size: 13px;
              padding-top: 7px;
              font-weight: 500;

              color: #999;
            }
          }
        }
        .appraise_main {
          width: 500px;
          height: 100%;
          padding-top: 35px;
          position: relative;
          padding-right: 36px;
          .reply {
            position: absolute;
            right: 34px;
            top: 0;
            background: #f1f3f4;
            padding: 1px 6px;
            border-radius: 20px;
            color: #666;
            font-size: 14px;
            input {
              width: 80px;
              outline: none;
              border: 1px solid #000;
              text-indent: 5px;
              font-size: 11px;
              border-radius: 4px;
            }
          }
          .main {
            font-size: 16px;
            color: #000;
            margin-bottom: 20px;
          }
          .reply_box {
            font-size: 14px;
            padding: 8px 10px;
            color: #333;
            background-color: #f5f8fa;
            line-height: 21px;
            // margin-top: 10px;
            .reply_main {
              .time {
                float: right;
                font-size: 12px;
                transform: scale(0.8);
                padding-top: 15px;
                color: #999;
              }
              .line {
                height: 1px;
                margin: 0 auto;
                background: #ddd;
                margin-top: 10px;
                margin-bottom: 5px;
              }
            }
          }
        }
      }
      .appraise_list:last-of-type {
        border-bottom: 0;
      }
    }
  }

  .products_box {
    width: 100%;
    margin-top: 20px;
    display: flex;
    justify-content: space-evenly;
  }

  .pro_left {
    width: 160px;
    height: 670px;
    background-color: #fff;
    float: left;
    border: 1px solid #ddd;
  }

  .pro_left .gratia {
    padding-top: 10px;
    background-position: center 10px;
    width: 158px;
    height: 158px;
    background: url("../assets/img/det_sal_title.gif") center no-repeat;
    float: left;
  }

  .pro_left .pro_banner {
    width: 100%;
    height: 282px;
    margin-top: 160px;
    overflow: hidden;
    ::v-deep {
      .el-carousel {
        width: 100%;
      }
      .el-carousel__container {
        height: 245px;
      }
      .el-carousel__arrow {
        width: 25px;
        height: 25px;
        background: #7f0019;
        top: 90%;
      }
      .el-icon-arrow-left::before {
        content: "<";
        font-family: "宋体";
      }
      .el-carousel__arrow--right::after {
        content: ">";
        font-family: "宋体";

        // font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
      }
      .bestimg {
        width: 158px;
        height: 158px;
        img {
          width: 100%;
          display: block;
        }
      }
      .title {
        font-size: 12px;
        overflow: hidden;
        padding-left: 4px;
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .bestprice {
        padding-left: 20px;
        del {
          color: #666;
          font-size: 12px;
        }
        color: #7f0019;
        font-size: 14px;
      }
    }
  }

  .pro_banner .info_a {
    width: 480px;
  }

  .pro_banner .info_a > li {
    width: 158px;
    height: 100%;
    float: left;
    padding-top: 15px;
  }

  .pro_banner .info_a li img {
    width: 140px;
    height: 140px;
    margin-left: 9px;
  }

  .pro_banner .info_a li .info_b {
    width: 140px;
    height: 82px;
    margin-left: 9px;
  }

  .info_b > li {
    line-height: 20px;
    font-family: Arial;
    color: #000;
    font-size: 12px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .del_color {
    color: #605f5d;
  }

  .info_b li span {
    color: #7f0019;
    font-weight: bold;
    font-size: 12px;
  }

  .info_b li span b {
    font-size: 18px;
  }

  .info_b li p {
    font-size: 12px;
    color: #000;
  }

  .pro_lbtn,
  .pro_rbtn {
    display: inline-block;
    width: 9px;
    height: 17px;
    margin-left: 20px;
    cursor: pointer;
    margin-top: 15px;
  }

  .pro_lbtn {
    background: url("../assets/img/lbut.png");
  }

  .pro_rbtn {
    background: url("../assets/img/rbut.png");
    float: right;
    margin-right: 20px;
  }

  .pro_left .dsgadv {
    width: 140px;
    height: 180px;
    margin: 0 auto;
    margin-top: 25px;
  }

  .pro_center {
    width: 982px;
    height: 798px;
    border: 1px solid #ddd;
    background-color: #fff;
    margin: 0 20px;
    .detinfo {
      display: flex;
      padding-left: 20px;
      width: 100%;
      height: 38px;
      align-items: center;
      border-bottom: #ddd solid 1px;
      p {
        padding: 0 5px;
        cursor: pointer;
      }
    }
    .detinfo_title {
      display: flex;
      padding: 0 20px;
      width: 100%;
      height: 38px;
      align-items: center;
      justify-content: space-between;
      background-color: #f2f2f2;
      border-bottom: #ddd solid 1px;
      h3 {
        color: #515151;
      }
      p {
        color: #000;
        font-size: 14px;
        padding: 0 20px;
      }
    }
    .detinfo_box {
      display: flex;
      .detinfo_ul {
        width: 50px;
        float: left;
        margin: 20px 20px 0 19px;
        height: 530px;
        overflow: hidden;
        li {
          border: #ddd solid 2px;
          width: 48px;
          height: 48px;
          cursor: pointer;
          margin-bottom: 10px;
          &.sel {
            width: 48px;
            height: 48px;
            border: #7f0019 solid 2px;
          }
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .detinfo_img {
        img {
          width: 100%;
        }
      }
      .introduce {
        width: 270px;
        margin: 20px 19px 0 20px;
        height: 500px;
        .detinfo_talk {
          color: #000;
          font-size: 14px;
        }
        .detinfo_if {
          border-top: #ddd solid 1px;
          background-color: #f8f8f8;
          padding: 9px 0 6px 0;
          margin-top: 10px;
          .detinfo_if_list {
            width: 262px;
            margin: 0 auto;
            li {
              padding: 0 10px;
              height: auto;
              line-height: 28px;
              font-size: 14px;
              color: #000;
              .freight {
                color: red;
                font-weight: bold;
              }
              .li_p {
                font-size: 14px;
                color: #000;
              }
            }
          }
          .detinfo_py {
            padding: 3px 0px;
            background-color: rgb(127, 0, 25);
            .detinfo_if_list {
              width: 262px;
              margin: 0px auto;
              background-color: rgb(255, 255, 255);
              padding: 5px 0px;
              li {
                padding: 0px 10px;
                height: 25px;
                line-height: 25px;
                font-size: 14px;
                color: rgb(0, 0, 0);
                big {
                  font-size: 24px;
                  font-style: normal;
                  color: rgb(127, 0, 25);
                  font-size: 18px;
                  font-weight: bold;
                }
              }
            }
          }
        }

        .detinfo_buy {
          // width: 230px;
          line-height: 40px;
          text-align: center;
          background-color: #7f0019;
          color: #fff;
          cursor: pointer;
        }
        .shoping_box {
          padding-top: 10px;
          display: flex;
          justify-content: space-between;
          .Shopcar {
            background: url("../assets/img/10053.png") center no-repeat #7f0019;
            width: 110px;
            height: 40px;
            cursor: pointer;
            padding: 0;
            border-radius: 4px;
          }
          .collection {
            width: 110px;
            text-align: center;
            line-height: 14px;
            cursor: pointer;
            border: #b9a17b solid 1px;
            background-color: #f5f2e9;
            color: #7f0019;
            font-size: 15px;
          }
        }
        .detinfo_msg {
          padding-top: 20px;
          color: #000;
          font-size: 14px;
          font-weight: bold;
          p {
            padding-top: 5px;
            font-size: 13px;
            color: #8b8386;
          }
        }
      }
    }
  }
  .pro_right {
    width: 160px;
    // height: 855px;
    border: 1px solid #ddd;
    background-color: #fff;
    .prdm_title,
    .prdm_bestp {
      padding: 0 19px;
      line-height: 30px;
      text-align: center;
      border-bottom: #ddd solid 1px;
      color: #000;
      font-size: 14px;
      font-weight: bold;
    }

    .goods_ul {
      width: 158px;
      .goods_li {
        padding-bottom: 20px;
        // height: 220px;
        border-bottom: 1px solid #ddd;
        width: 100%;
        img {
          width: 100%;
          display: block;
          cursor: pointer;
        }
        .goods_text {
          line-height: 20px;
          font-family: Arial;
          color: #000;
          font-size: 12px;
          overflow: hidden;
          padding: 0 5px;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }
        .goods_price {
          color: #7f0019;
          font-weight: bold;
          font-size: 12px;
          padding: 0 5px;
          big {
            font-size: 18px;
          }
        }
      }
    }
  }
}
</style>